<template>
  <div class="normalNumberInputContainer">
    <el-input-number v-model="dataForm[attrName]" :disabled="disabled" @change='changedCallback'
                     controls-position="right" :min="mMin" :max="mMax"></el-input-number>
    <label class="normalNumberInputMaxLabel">取值范围：{{ mMin }} ~ {{ mMax }}</label>
  </div>
</template>

<script>

import basicMixins from './basicMixins'

export default {
  name: 'normalNumber',
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    min: {
      type: Number,
      default: 0
    },
    max: {
      type: Number,
      default: 0
    },
    changedCallback: {
      type: Function,
      default: () => {
      }
    }
  },
  computed: {
    mMax() {
      return this.R.max(this.min, this.max)
    }
  },
  data() {
    return {
      mMin: this.min
    }
  },
  mixins: [basicMixins]
}
</script>

<style lang="scss" scoped>
.normalNumberInputContainer {
  position: relative;

  .normalNumberInputMaxLabel {
    position: absolute;
    right: 70px;
    opacity: 0.5;
  }
}

</style>
